<template>
	<view class="center">
		
		<view class="title" >
			选择性别
		</view>
		
	 <view class="chooose">
		 
		<view 
		  class="item" 
		  @tap='Choose1'
		  :class="{ative:isMan}">
			<image src="../../static/image/login/head.png"   mode=""></image>
			 <h4>男士</h4>
			 <text>热血爽文，狂拽酷炫</text>			
		</view>
		
		<view class="item" @tap='Choose2' :class="{ative:!isMan}">
			<image src="../../static/image/login/head.png"  mode=""></image>
			 <h4>女生</h4>
			 <text>总裁王爷，绝不将就</text>			
		</view>
		
	 </view>
	 
	 <button type="primary" class="experience" @click="translation">立即体验</button>
	 
	</view>
</template>

<script>
	import Data from '../../Json.js'
	
export default {
   data() {
   	return {
		isMan:false
   	}
   },
 methods: {
 	translation() {
		uni.switchTab({
			url:"/pages/bookshelf/bookshelf",
			success:()=>{
				let { user,book } = Data
				this.$store.commit({
					type:'initApp',
					palyload:{
						user,
						book,
					}
				}),
				sessionStorage.setItem("store",JSON.stringify(this.$store.state))
			}
		},
		)
 	},
	Choose1(vlaue){		
		this.isMan = true
	},
	Choose2(){
		this.isMan = false
		console.log('当前点击的不是男生')
	}
	
 },
}
</script>

<style scoped>
.center {
	display: flex;
	flex-direction: column;
}
.title{
	text-align: center;
	margin: 10vh;
	font-size: 3vh;
}
.experience{
	border-radius: 12vh;
	margin-top:30vh;
	margin-left: 12vh;
	margin-right: 12vh;
}

.chooose{
	display: flex;
	justify-content: space-around;
	text-align: center;
	margin-top: 5vh;
	
}
image{
	width: 66%;
	height: 88%;
	border-radius: 15px;
	padding: 5px;
}
.ative{
	background-color: #007aff;
}

text{
	font-size: 0.6vh;
}
h2{
	font-size: 3vh;
}
</style>